<!DOCTYPE html>
<html>
<head>
    <title>发送表</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- 全局css -->
    <link rel="stylesheet" href="../css/bootstrap.min.css?v=3.3.7">
    <link rel="stylesheet" href="../fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="../fonts/web-icons/web-icons.css">
    <link rel="stylesheet" href="../js/plugins/elementui/index.css">
    <link rel="stylesheet" href="../js/plugins/toastr/toastr.css">
    <link rel="stylesheet" href="../css/skins/style.css" >
    <link rel="stylesheet" href="../css/common.css" >
    <link rel="stylesheet" href="../css/sys.css" >
    <link rel="stylesheet" href="../css/plugins/jsTree/jstree.css" />

    <!-- 全局js -->
    <script src="../js/plugins/jquery/jquery.min.js?v=2.1.4"></script>
    <script src="../js/plugins/layer/layer.min.js"></script>
    <script src="../js/plugins/bootstrap/bootstrap.min.js?v=3.3.6"></script>
    <script src="../js/plugins/vue/vue.min.js"></script>
    <script src="../js/plugins/elementui/index.js"></script>
    <script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="../js/plugins/toastr/toastr.min.js"></script>
    <script src="../js/plugins/tableExport/libs/FileSaver/FileSaver.min.js"></script>
    <script src="../js/plugins/tableExport/libs/js-xlsx/xlsx.core.min.js"></script>
    <script src="../js/plugins/tableExport/tableExport.min.js"></script>
    <script src="../js/plugins/jsTree/jstree.min.js"></script>
    <script src="../js/common.js"></script>

</head>
<body class="gray-bg">

<div class="wrapper-content" id="rrapp" v-cloak>
    <div class="row cmm">
        <div class="col-sm-12">
            <!--输入 begin-->
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>富短信新增</h5>
                    <div class="ibox-tools">
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="panel-vue">
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <a class="btn btn-primary" @click="preOne()">上一步</a>
                                <a class="btn btn-primary" @click="nextOne()">下一步</a>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12" style="padding: 15px;">
                                <el-steps :active="active" finish-status="success" simple
                                          style="margin-top: 0px;margin-bottom: 10px">
                                    <el-step title="选择模板 1"></el-step>
                                    <el-step title="选择号码 2"></el-step>
                                    <el-step title="提交审批 3"></el-step>
                                </el-steps>
                            </div>
                        </div>
                        <el-row class="form-group"  v-if="active==0">
                            <el-col :span="8" style="padding: 15px;min-width: 300px;
                                    min-height: 500px;">
                                <el-form class="form-horizontal" :model="fsmsSend" ref="fsmsSendForm" :rules="rules">
                                    <el-row class="form-group">
                                        <el-col :xs="24" :span="6" class="control-label">
                                            <span>选择模板:</span>
                                        </el-col>
                                        <el-col :xs="24" :span="18">
                                            <el-radio-group v-model="templateId" size="small" @change="templateChange(templateId)">
                                                <el-radio-button :label="item.templateId"
                                                                 v-for="item in templateList"
                                                >{{item.templateName}}</el-radio-button>
                                            </el-radio-group>
                                        </el-col>
                                    </el-row>
                                    <el-row class="form-group">
                                        <el-col :xs="24" :span="6" class="control-label">
                                            <span>发送标识:</span>
                                        </el-col>
                                        <el-col :xs="24" :span="18">
                                            <el-form-item prop="sendFlag">
                                                <el-radio-group v-model="fsmsSend.sendFlag">
                                                    <el-radio v-for="(item,index) in sendFlagList" :label="item.value">
                                                        {{item.text}}
                                                    </el-radio>
                                                </el-radio-group>
                                                <div class="el-view-content" >
                                                    {{sendFlagMap[fsmsSend.sendFlag]}}
                                                </div>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>

                                    <el-row class="form-group" v-if="fsmsSend.sendFlag == 2">
                                        <el-col :xs="24" :span="6" class="control-label">
                                            <span>计划发送时间:</span>
                                        </el-col>
                                        <el-col :xs="24" :span="18"  >
                                            <el-form-item prop="planSendTime">
                                                <el-date-picker
                                                        v-model="fsmsSend.planSendTime"
                                                        type="datetime"
                                                        value-format = "yyyy-MM-dd HH:mm:ss"
                                                        placeholder="选择发送时间">
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>

                                    <el-row class="form-group">
                                        <el-col :xs="24" :span="6" class="control-label">
                                            <span>源号码扩展号:</span>
                                        </el-col>
                                        <el-col :xs="24" :span="18">
                                            <el-form-item prop="sourceNum">
                                                <el-input v-model="fsmsSend.sourceNum"
                                                          style="width: 220px"
                                                          auto-complete="off"></el-input>
                                            </el-form-item>

                                        </el-col>
                                    </el-row>


                                    <el-row class="form-group">
                                        <el-col :xs="24" :span="6" class="control-label">
                                            <span>备注:</span>
                                        </el-col>
                                        <el-col :xs="24" :span="18">
                                            <el-form-item prop="remark">
                                                <el-input
                                                          style="width: 220px"
                                                          v-model="fsmsSend.remark"
                                                          auto-complete="off"></el-input>

                                            </el-form-item>

                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-col>
                            <el-col  :span="12" class="border-left" style="padding: 15px;min-width:
                            300px;min-height: 500px;">

                                <ul class="sortable-list connectList cavnen-list agile-list" style="width: 440px;">
                                    <li :id="item.canvasId" v-for="(item,index) in template.cavnenList"
                                        class="element text-center">
                                        <div style="min-height: 40px">
                                            <div  style="width: 100%;"  v-if="item.contentFlag == 1">
                                                <div v-if="item.canvasType ==1" style="width: 100%; text-align:
                                                center ">
                                                     视频
                                                </div>
                                                <div v-if="item.canvasType ==2" style="width: 100%; text-align:
                                                center ">
                                                    <img alt="image" width="100%" src="/img/p_big2.jpg">
                                                </div>
                                                <div v-if="item.canvasType ==3" style="width: 100%; text-align: center ">
                                                    {{item.title}}</div>
                                                <div v-if="item.canvasType ==3" style="width: 100%; text-align: left ">{{item.content}}</div>
                                            </div>
                                            <div  style="width: 100%;"  v-if="item.contentFlag == 2">

                                                <div v-if="item.canvasType ==1" style="width: 100%; text-align:
                                                left ">
                                                    <el-upload
                                                            drag
                                                            action="https://jsonplaceholder.typicode.com/posts/"
                                                            >
                                                        <i class="el-icon-upload"></i>
                                                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                                        <div class="el-upload__tip" slot="tip">只能上传视频文件，且不超过2M</div>
                                                    </el-upload>
                                                </div>
                                                <div v-if="item.canvasType ==2" style="width: 100%; text-align:
                                                left ">
                                                    <el-upload
                                                            drag
                                                            action="/common/uploadPic"
                                                            :show-file-list="false"
                                                            :data="{'id': item.canvasId}"
                                                            :on-success="handleAvatarSuccess"
                                                            >
                                                        <img v-if="item.url != null" width="100%" height="100%"
                                                             :src="item.url"
                                                             class="avatar">
                                                        <i v-if="item.url == null" class="el-icon-upload"></i>
                                                        <div  v-if="item.url == null" class="el-upload__text">
                                                            将文件拖到此处，或<em>点击上传</em></div>
                                                        <div v-if="item.content==null" class="el-upload__tip"
                                                             slot="tip">只能上传jpg/png
                                                            文件，且不超过500kb</div>
                                                    </el-upload>
                                                </div>
                                                <div v-if="item.canvasType ==3" style="width: 100%; text-align: center ">
                                                    <el-input v-model="item.title"  placeholder="标题"></el-input>
                                                </div>
                                                <div v-if="item.canvasType ==3" style="width: 100%; text-align: left ">
                                                    <el-input placeholder="内容"
                                                            v-model="item.content"
                                                            type="textarea"
                                                            :rows="5"
                                                            auto-complete="off"></el-input>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="agile-detail text-left" >
                                            <i class="fa fa-long-arrow-down"></i> {{item.canvasSort}}
                                            {{canvasTypeMap[item.canvasType]}}
                                            <a href="#" class="pull-right btn btn-xs btn-white">{{contentFlagMap[item.contentFlag]}}</a>
                                        </div>
                                    </li>
                                </ul>

                            </el-col>
                        </el-row>
                        <el-row class="form-group text-center"  v-show = "active==1">
                            <el-col  :span="12"
                                     style="padding: 15px;min-width:300px;min-height: 500px; ">

                                <el-form class="form-horizontal" :model="fsmsSend" ref="fsmsSendForm2" :rules="rules">
                                    <el-row class="form-group">
                                        <el-col :xs="24" :span="6" class="control-label">
                                            <span>号码类别:</span>
                                        </el-col>
                                        <el-col :xs="24" :span="18">
                                            <el-form-item >
                                                <el-radio-group v-model="fsmsSend.addressFlag">
                                                    <el-radio v-for="(item,index) in addressFlagList" :label="item.value">
                                                        {{item.text}}
                                                    </el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="form-group" v-if="fsmsSend.addressFlag==1">
                                        <el-col :xs="24" :span="6" class="control-label">
                                            <span>录入号码:</span>
                                        </el-col>
                                        <el-col :xs="24" :span="18">
                                            <el-form-item >
                                                <el-input placeholder="用';'隔开"
                                                          v-model="fsmsSend.addressobile"
                                                          type="textarea"
                                                          :rows="15"
                                                          auto-complete="off"></el-input>

                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="form-group" v-show="fsmsSend.addressFlag==2">
                                        <el-col :xs="24" :span="6" class="control-label">
                                            <span>通讯录:</span>
                                        </el-col>
                                        <el-col :xs="24" :span="18">
                                            <el-form-item >
                                                <div class="jstree-box">
                                                    <div class="pagetree margin-top-10 text-left">

                                                            <div id="slimScroll">
                                                                <div id="jstree"></div>
                                                            </div>

                                                    </div>
                                                </div>

                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row class="form-group upload" v-if="fsmsSend.addressFlag==3">
                                        <el-col :xs="24" :span="6" class="control-label">
                                            <span>上传Excel:</span>
                                        </el-col>
                                        <el-col :xs="24" :span="18">
                                            <el-form-item >
                                                <el-upload
                                                        drag
                                                        action="/common/uploadAddress"
                                                        :show-file-list="false"
                                                        :on-success="handleExcelSuccess"
                                                >
                                                    <div class="upload-label"
                                                         v-if="fsmsSend.fileId != null">
                                                        {{fsmsSend.fileName}}
                                                           共 {{fsmsSend.mobileNum}} 个号码
                                                    </div>

                                                    <i v-if="fsmsSend.fileId == null" class="el-icon-upload"></i>
                                                    <div  class="el-upload__text">
                                                        将文件拖到此处，或<em>点击上传</em></div>
                                                    <div class="el-upload__tip"
                                                         slot="tip">只能上传Excel文件，且不超过1M
                                                    </div>
                                                </el-upload>

                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-col>
                        </el-row>
                        <el-row class="form-group"  v-if="active==2">
                            <el-col  :span="12"  style="padding: 15px;min-width:
                            300px;min-height: 500px;">
                                <ul class="sortable-list connectList cavnen-list agile-list" style="width: 440px;">
                                    <li :id="item.canvasId" v-for="(item,index) in template.cavnenList"
                                        class="element text-center">
                                        <div style="min-height: 40px">
                                            <div  style="width: 100%;">
                                                <div v-if="item.canvasType ==1" style="width: 100%; text-align:
                                                left ">
                                                    {{视频}}
                                                </div>
                                                <div v-if="item.canvasType ==2" style="width: 100%; text-align:
                                                left ">
                                                    <img v-if="item.url != null" width="100%" height="100%"
                                                         :src="item.url"
                                                         class="avatar">
                                                </div>
                                                <div v-if="item.canvasType ==3" style="width: 100%; text-align: center ">
                                                    {{item.title}}
                                                </div>
                                                <div v-if="item.canvasType ==3" style="width: 100%; text-align: left ">
                                                    {{item.content}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="agile-detail text-left" >
                                            <i class="fa fa-long-arrow-down"></i> {{item.canvasSort}}
                                            {{canvasTypeMap[item.canvasType]}}
                                            <a href="#" class="pull-right btn btn-xs btn-white">{{contentFlagMap[item.contentFlag]}}</a>
                                        </div>
                                    </li>
                                </ul>

                            </el-col>
                            <el-col  :span="12"  style="padding: 15px;min-width:
                            300px;min-height: 500px;">


                            </el-col>
                        </el-row>
                        <div class="text-center">

                            <a class="btn btn-primary" @click="preOne()">上一步</a>
                            <a class="btn btn-primary" @click="nextOne()">下一步</a>

                        </div>
                    </div>
                </div>
            </div>
            <!--输入 end-->

        </div>
    </div>
</div>

<script src="../fms/js/fsmsAdd.js"></script>
</body>
</html>
